<template>
  <div>
    <van-nav-bar left-arrow class="bb">
      <template #title><span style="color: white"> 评论 </span></template>
    </van-nav-bar>

    <div class="tops">
      <img src="../assets/订单信息-服务评价.png" alt="" />
      <h5>订单信息</h5>
    </div>
    <div class="tops_time">
      <ul>
        <li>
          <span>商品</span>
          <p>{{ commentObj.title }}</p>
        </li>
        <li>
          <span>发货时间</span>
          <p>{{ commentObj.orderTime }}</p>
        </li>
        <li>
          <span>到达时间</span>
          <p>{{ commentObj.receiveTime }}</p>
        </li>
      </ul>
    </div>

    <div class="tops">
      <img src="../assets/订单信息-服务评价.png" alt="" />
      <h5>服务评价</h5>
    </div>
    <div class="fw_xing">
      <ul>
        <li>
          <span>描述相符</span>
          <!-- commentObj2.prodConformityPoint
          commentObj2.logisticsSpeedPoint
          commentObj2.serviceQualityPoint
          commentObj2.comment -->
          <van-rate
            v-model="commentObj2.prodConformityPoint"
            :size="25"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            :readonly="commentObj.status != 20"
          />
        </li>
        <li>
          <span>物流速度</span>
          <van-rate v-model=" commentObj2.logisticsSpeedPoint" :readonly="commentObj.status != 20"/>
        </li>
        <li>
          <span>服务质量</span>
          <van-rate v-model="commentObj2.serviceQualityPoint" :readonly="commentObj.status != 20"/>
        </li>
      </ul>
    </div>

    <textarea
      name=""
      id=""
      cols="25"
      rows="12"
      placeholder="请填写评价"
      v-model="commentObj2.comment"
    ></textarea>
    <div class="foots">
      <van-button
        v-show="commentObj.status == 20"
        type="info"
        size="normal"
        round
        block
        color="blue"
        @click="handlebtn(commentObj.serialNo)"
        >提交按钮</van-button
      >
    </div>
  </div>
</template>

<script>
import { getEvaluate2,getEvaluate3 } from "@/request/api";

export default {
  data() {
    return {
      val: "",
      value1: 0,
      value2: 0,
      value3: 0,
      commentObj: {},
      commentObj2:{}
    };
  },
  created() {
    this.commentObj = this.$route.query;
    console.log("星星",this.commentObj);
    
    getEvaluate3({
      serialNo: this.commentObj.serialNo,
    }).then(res=>{
      console.log(res);
      this.commentObj2 = res.data
    })
  },
  methods: {
    handlebtn(serialNo) {
      getEvaluate2({
        serialNo: serialNo,
        prodConformityPoint: this.value1,
        logisticsSpeedPoint: this.value2,
        serviceQualityPoint: this.value3,
        comment: this.val,
      }).then((res) => {
        console.log(res);
        if (res.errCode == 0) {
          this.$router.replace({ name: "Logistics", params: { active: 3 } });
        }
      });
    },
  },
};
</script>

<style scoped>
.bb {
  background: blue;
}
.tops {
  display: flex;
  background: skyblue;
}
.tops img {
  width: 5%;
}
.tops h5 {
  font-size: 1.2rem;
  color: blue;
  margin-left: 2rem;
}
.tops_time,
.fw_xing {
  background: #fff;
  margin-bottom: 0.8rem;
}
.tops_time ul,
.fw_xing ul {
  padding: 1rem 1rem;
}
.tops_time ul li,
.fw_xing ul li {
  display: flex;
}
.fw_xing ul li {
  margin: 1rem 0.2rem;
}
.tops_time ul li span {
  flex: 3;
}
.tops_time ul li p {
  flex: 8;
}
.fw_xing ul li span {
  flex: 1;
}
.fw_xing ul li .van-rate {
  flex: 2;
}
textarea {
  width: 100%;
  outline: none;
  border: none;
}
.foots {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
}
</style>